<template>
    <div class="retrospect">
        <Search  @searchAll="search" :isSearchAll="true" :isReport="true"></Search>
        <div class="content">
            <vue-better-scroll
                class="wrapper"
                ref="scroll0"
                :scrollbar="scrollbarObj"
                :pullDownRefresh="pullDownRefreshObj"
                :pullUpLoad="pullUpLoadObj"
                :startY='parseInt(startY)'
                @pullingUp="onPullingUp"
                > 
                <noData v-if="!listArr.length"></noData>
                <div v-for="(item, index) in listArr" :key="index" class="item">
                 <!-- <div> -->
                    <div class="left-content">
                            <div class="head-info">
                            <div class="head-img" v-if="item.imgUrl">
                                    <img  :src="item.imgUrl" alt="">
                            </div>
                            <div class="head-img" v-else>
                                <img v-if="item.Gender=='男'" src="../../assets/avatar2.png" alt="">
                                <img v-if="item.Gender=='女'" src="../../assets/avatar3.png" alt="">
                            </div>
                            <h3>{{item.userName}}</h3>
                            <p style="width: 45.333vw;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;">{{item.age}} | {{item.DepartName}}</p><br>
                            <div style="margin-left:-40px">
                            <p style="width: 45.333vw;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;">异常情况:{{item.BodyCondition==''?'待补充':item.BodyCondition}}</p>
                            <p>采取措施:{{item.DealInfo==''?'待补充':item.DealInfo}}</p>
                            <p class="date">登记日期:{{item.RegistDate==''?'暂无':item.RegistDate.substr(0,16)}}</p>
                            </div>
                        </div>
                    </div>
                    <div class="right-content">
                        <h3 style="color: red;font-weight: bold;text-align: right;" >体温:{{item.Temperature}} &#8451</h3>
                        <p class="date" style="margin-top: -14px;">{{item.RegistDate.substr(0,16)}}</p>
                       <div v-if="ismodify">
                        <p style="margin-bottom: -4px;" v-if="item.BodyCondition==''&&item.DealInfo==''" class="trace" @click="$router.push({path:'./bodyAbnormaledit',query:{tempid:`${item.TemperatureId}`}})">完善信息</p>
                        <p style="margin-bottom: -4px;" v-else class="trace" @click="$router.push({path:'./bodyAbnormaledit',query:{tempid:`${item.TemperatureId}`}})" >补充信息</p>
                       </div>
                    </div>
                    

                 <!-- </div> -->
                 <!-- <div style="display: flex;">
                    <p >异常情况:37</p>
                    <p>采取措施:</p>
                    <p class="date">登记日期:</p>
                    <p class="trace" @click="$router.push('/trace')">完善信息</p>
                </div> -->
            </div>

            </vue-better-scroll>
        </div>
         <myMenu ></myMenu>
        <companyProp :companyPropShow="companyPropShow"
                     :selectCompany="selectCompanyTeam"></companyProp>
    </div>
</template>
<script>
import Search from '@commonComponents/search'
import { Datetime, Actionsheet } from 'vux'
import VueBetterScroll from 'vue2-better-scroll'
import myMenu from '@/commonComponents/menu'
import companyProp from '@/commonComponents/companyProp'
export default {
    components: {
        Actionsheet,
        Datetime,
        myMenu,
        Search,
        VueBetterScroll,
        companyProp,
    },
    data () {
        return {
            companyPropShow: false,
            ismodify:false,
            userInfo: {},
            addPath: '',
            itemType: [], // 项目类型(内部管理)
            itemTypeList: [[]], // 项目类
            DeptId: '',
            DeptName: '',
            companyPropShow: false,
            showCheckIndex: 1,
            show: false,
            name1: '',
            name2: '',
            name3: '',
            parmas: {
                departId:"",
                pageIndex:1,
                pagesize:10,
                userName:"",
                departName:""
            },
            listArr: [],
            total: 0,
            listCount: 0, // 当前列表条数
            nodata: true,
            // dropDown: false
            // 这个配置可以开启滚动条，默认为 false。当设置为 true 或者是一个 Object 的时候，都会开启滚动条，默认是会 fade 的
            scrollbarObj: {
                fade: true
            },
            // 这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
            pullDownRefreshObj: false,
            // 这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机
            pullUpLoadObj: {
                threshold: 0,
                txt: {
                    more: '加载更多',
                    noMore: '没有更多数据了'
                }
            },
            startY: 0, // 纵轴方向初始化位置
        }
    },
    created () {
        this.$vux.loading.show({
            text: '加载中...'
        })
        //  this.addPath = '/thermometryedit'
    },
    mounted () {
        this.userInfo = JSON.parse(localStorage.getItem('registerInfo')) || {}
        this.DeptName = this.unescape(this.userInfo.departName)
        this.parmas.departId = this.userInfo.departId
        //this.parmas.departName = this.userInfo.departName
        // var token = JSON.parse(window.localStorage.getItem('userInfo')) || {}
        // this.parmas.userName = token.nickName
        // var token = JSON.parse(window.localStorage.getItem('userInfo'))
        // this.parmas.userId = token.userid
        // this.DeptName = token.deptname == '安全环保部' ? ' 贵阳勘测设计研究院有限公司' :token.deptname
        // this.DeptId = token.deptname == '安全环保部' ? '1000000' : token.deptid
        this.$axiosAjax.GetIsManager({
            userNo: this.userInfo.userId
        }).then(res => {
            if (res.status == 200) {
                if (res.data.code == 1) {
                    this.ismodify = true
                } else {
                    this.ismodify = false
                }
            }
        })
        this.onPullingDown()
    },
    methods: {
        //特殊字符转化
        unescape(html) {
            return html
                .replace(html ? /&(?!#?\w+;)/g : /&/g, '&amp;')
                .replace(/&lt;/g, '<')
                .replace(/&gt;/g, '>')
                .replace(/&quot;/g, '"')
                .replace(/%23/g, '#')
        },
        selectCompanyTeam (item) {
            console.log(item)
            this.DeptName = this.unescape(item.UnitName)
            this.parmas.departId = item.UnitId
            this.companyPropShow = false
            this.onPullingDown()
        },
        search (item) {
            this.parmas.pageIndex = 1;
            if (item.deptId) {
                this.parmas.departId = item.deptId
            } else {
                this.parmas.departId = this.userInfo.departId
            }
            this.parmas.userName = item.name
            this.listArr = []
            this.onPullingDown()
        },
        goBack () {
            this.$router.push('/Index/newEdit')
        },
        back () {
            // this.$router.push('./safeCheck')
        },
        routerGo (item) {
            console.log(item, 11)
            window.sessionStorage.setItem('arr', JSON.stringify(item))
            this.$router.push({ path: './safetechLedgerlist',query:{departid:item.DepartId} })
        },
        query () {
            this.dataArr()
        },
        onPullingDown () {
            // 模拟下拉刷新
            //this.listCount = 0
            // this.parmas.data.ProjectItem = this.itemType[0]?this.itemType[0]:'',
            this.$axiosAjax.GetTemperatureHighALL(this.parmas).then((res) => {
                if (res.status == 200) {
                    let relist = res.data.data;
                    this.listArr = this.listArr.concat(relist);
                    this.total = res.data.count
                    this.listCount = this.listArr.length
                    if (res.data.data != null && res.data.data.length > 0) {
                        this.nodata = true
                    } else {
                        this.nodata = false
                    }
                    if (this.listCount < this.total) {
                        this.$refs.scroll0.forceUpdate(true)
                    } else {
                        this.$refs.scroll0.forceUpdate(false)
                    }
                }
            }
        ).finally(() => {
                this.$vux.loading.hide()
            })
        },
        onPullingUp () {
            this.parmas.pageIndex++;
            // 模拟上拉 加载更多数据
            this.onPullingDown()
        }
    }
}
</script>
<style lang="less" scoped>
    .retrospect {
        width: 100%;
        height: 100%;
        background-color: #EBEEF2;
        display: flex;
        flex-direction: column;
        .content {
            flex: 1;
            overflow-y: hidden;
            margin-top: 15px;
            .item {
                background-color: #fff;
                padding: 5px;
                height: 130px;
                overflow: hidden;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #f2f2f2;
                .left-content {
                    position: relative;
                    flex: 3;
                    font-size: 14px;
                    .head-img {
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        border: 1px solid #eee;
                        position: absolute;
                        left: -45px;
                        top: 19%;
                        transform: translateY(-50%);
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .head-info {
                        height: 100%;
                        position: absolute;
                        left: 50px;
                        top: 50%;
                        transform: translateY(-50%);
                        padding: 10px 0;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        h3 {
                            font-weight: bold;
                        }
                    }
                }
                .right-content {
                    font-size: 14px;
                    padding: 10px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .date {
                        color: #666;
                        padding-bottom: 5px;
                    }
                    .trace {
                        font-size: 12px;
                        color: #2269FC;
                        border: 1px solid #2269FC;
                        background-color: #DAE6FE;
                        height: 28px;
                        line-height: 28px;
                        text-align: center;
                        border-radius: 14px;
                    }
                }
            }
        }
    }
</style>